<div class="btn sidebar-menu-item-main d-inline-flex align-items-center collapsed w-100" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#{{$ctrl.item.title}}" aria-controls="contents-collapse" ng-if="!$ctrl.item.isHiden">
    <object ng-if="$ctrl.item.svg" type="image/svg+xml" data="/mix-app/assets/img/svg/{{$ctrl.item.svg}}" class="me-3 text-primary">
        <img ng-src="/mix-app/assets/img/svg/{{$ctrl.item.svg}}" class="me-3" style="" />
    </object>

    <span ng-bind-html="$ctrl.translate($ctrl.item.title)" class="menu-item-title"></span>

    <span class="btn-group btn-group-sm position-absolute end-0 d-none mt-1x shadow  me-2" ng-mouseenter="$ctrl.addClass($event)" ng-mouseleave="$ctrl.removeClass($event)" role="group" aria-label="Quick Actions" ng-if="$ctrl.item.subMenus.length>0">
        <a class="btn btn-primary" ng-repeat="m in $ctrl.item.subMenus  | limitTo: 3" href="{{m.path}}">
            <span class="{{m.icon}}"></span>
    </a>
    </span>
    <span class="btn-group btn-group-sm position-absolute end-0  me-2" role="group" aria-label="Quick Actions" ng-if="$ctrl.item.subMenus.length==0">
        <a class="btn btn-light" href="{{$ctrl.item.path}}">
            <span class="{{$ctrl.item.icon}}"></span>
    </a>
    </span>
</div>
<ul class="list-unstyled ps-5 mt-1 mb-3 collapse" id="{{$ctrl.item.title}}" ng-if="$ctrl.item.subMenus.length>0" is-active-menu data-bs-parent="#bd-docs-nav">
    <li ng-repeat="m in $ctrl.item.subMenus">
        <a class="d-inline-flex align-items-center rounded text-secondary py-1" href="{{m.path}}"><span
                class="{{m.icon}} me-3"></span>
            <span ng-bind="$ctrl.translate(m.title)"></span></a>
    </li>
</ul>